<!-- 业务功能管理 -->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 查看企业列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="addDialog">添加</el-button>
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="batchDeleteComp">批量删除</el-button>
                <el-button class="handSearchBut"
                           type="primary"
                           icon="search"
                           @click="search">搜索</el-button>
                <el-input v-model="select_word"
                          placeholder="请输入企业名称"
                          class="handle-input mr10" @keyup.enter.native="search"></el-input>
            </div><br/>
            <el-table :data="companyList"
                      border
                      style="width: 100%"
                      ref="multipleTable"
                      @select-all="selectComp"
                      @select="selectComp">
                <el-table-column type="selection"
                                 width="35"
                                 align='center'></el-table-column>
                <el-table-column prop="id"
                                 label="企业id"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="code"
                                 label="企业编号"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="name"
                                 label="企业名称"
                                 align='center'></el-table-column>
                <el-table-column prop="createDate"
                                 label="创建日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="upDate"
                                 label="更新日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="companyInfo"
                                 label="企业基本信息"
                                 align='center'></el-table-column>
                <el-table-column prop="type"
                                 label="企业行业类型"
                                 align='center' :formatter='formatter'></el-table-column>
                <el-table-column label="操作"
                                 width="180"
                                 align='center'>
                    <template slot-scope="scope">
                        <el-button size="small"
                                   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small"
                                   type="danger"
                                   @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle"
                   :visible.sync="editVisible"
                   width="550px">
            <el-form ref="form"
                     :model="form"
                     label-width="150px"
                     :rules="rules">
                <el-form-item label="企业ID"
                              v-if="inputDisabled">
                    <el-input v-model="form.id"
                              :disabled="inputDisabled"></el-input>
                </el-form-item>
                <el-form-item label="企业编号"
                              prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="企业名称"
                              prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="企业行业类型"
                              prop="type">
                    <el-col :span='24'>
                        <el-select v-model="form.type"
                                   placeholder="选择类型"
                                   style="width:100%">
                            <el-option :label="item.name"
                                       :value="item.id"
                                       v-for="(item,index) in typeList"
                                       v-bind:key="index"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="基本信息"
                              prop="companyInfo">
                    <el-input type="textarea"
                              rows="3"
                              v-model="form.companyInfo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示"
                   :visible.sync="delVisible"
                   width="300px"
                   center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'basetable',
    data () {
        return {
            rules: {
                name: { required: true, trigger: 'blur', message: '企业名称不能为空' },
                code: { required: true, trigger: 'blur', message: '企业编号不能为空' },
                companyInfo: { required: true, trigger: 'blur', message: '基本信息不能为空' },
                type: { required: true, trigger: 'blur', message: '企业类型不能为空' },
            },
            cur_page: 1, // 当前页
            pageSize: 10, // 一页有多少条
            multipleSelection: [], // 批量删除
            select_word: '', // 搜索关键字
            del_list: [],
            editVisible: false, // 编辑弹框显示
            delVisible: false, //  删除提示框
            form: {
                name: '', // 企业名称
                code: '', // 企业编号
                companyInfo: '', // 基本信息
                type: '' // 企业类型
            },
            dialogTitle: '添加',
            idx: -1, //  当前编辑的列表索引
            total: 0, // 总页数
            companyList: [], // 列表集合
            inputDisabled: false, // false时是添加 true是修改
            deleteId: '', // 单条删除
            typeList: [] // 行业类型数组
        }
    },
    created () {
        this.getData();
        this.getType();
    },
    methods: {
        // 分页导航
        handleCurrentChange (val) {
            this.cur_page = val;
            this.getData();
        },
        // 获取 easy-mock 的模拟数据
        getData () {
            let sendData = {
                pageNo: this.cur_page,
                size: this.pageSize,
                searchName: 'name',
                searchValue: this.select_word
            }
            this.fetch(this.urlConfig.companyList, sendData, 'get').then((response) => {
                this.total = response.data.total
                this.companyList = response.data.records
                this.$nextTick(() => {
                    this.companyList.forEach((item, index) => {
                        this.multipleSelection.forEach(sItem => {
                            if (JSON.stringify(sItem).indexOf(JSON.stringify(item)) > -1) {
                                this.$refs.multipleTable.toggleRowSelection(item, true);
                            }
                        })
                    })
                })
            }).catch((error) => {
                this.$message.success(error.message);
            })
        },
        handleEdit (index, row) {
            this.inputDisabled = true
            this.dialogTitle = '编辑'
            this.idx = index
            this.form = {
                name: row.name,
                code: row.code,
                id: row.id,
                companyInfo: row.companyInfo,
                type: row.type
            }
            this.editVisible = true;
        },
        search () {
            this.cur_page = 1
            this.getData()
        },
        addDialog: function () {
            this.inputDisabled = false
            this.dialogTitle = '添加'
            this.editVisible = true;
            this.form.id = ''
            this.form.code = ''
            this.form.name = ''
            this.form.companyInfo = ''
            this.form.type = ''
        },
        selectComp (val) {
            this.multipleSelection[this.cur_page] = val;
        },
        // 保存编辑
        saveEdit () {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.inputDisabled) {
                        // 修改
                        this.fetch(this.urlConfig.modCompany, this.form, 'get').then((response) => {
                            this.getData();
                            this.editVisible = false;
                            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        }).catch((error) => {
                            this.$message.error(error.message);
                        })
                    } else {
                        this.fetch(this.urlConfig.addCompany, this.form, 'get').then((response) => {
                            this.editVisible = false;
                            this.getData()
                            this.$message.success(`添加成功`);
                        }).catch((error) => {
                            this.$message.error(error.message);
                        })
                    }
                }
            })
        },
        // 确定删除
        deleteRow () {
            this.fetch(this.urlConfig.deleteCompany, { id: this.deleteId }, 'get').then((response) => {
                this.delVisible = false;
                this.getData()
                this.$message.success(`删除成功`);
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        batchDeleteComp () {
            this.$alert('您确定删除选中的企业吗？', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action === 'confirm') {
                        let sendData = {
                            ids: []
                        }
                        this.multipleSelection.forEach(items => {
                            items.forEach(item => {
                                sendData.ids.push(item.id)
                            })
                        })
                        this.fetch(this.urlConfig.batchDeleteComp, sendData, 'get').then((response) => {
                            if (response.code == 200) {
                                this.delVisible = false;
                                this.getData()
                            }
                            this.$message.success(response.message);
                        }).catch((error) => {
                            this.$message.success(error.message);
                        })
                    }
                }
            });
        },
        handleDelete (index, row) {
            // 点击单个删除
            this.deleteId = row.id
            this.delVisible = true;
        },
        getType () {
            // 获取行业类型 hYType
            this.fetch(this.urlConfig.hYType, {}, 'get').then((response) => {
                if (response.code == 200) {
                    this.typeList = response.data
                } else {
                    this.$message.error(response.message);
                }
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        formatter (row, column, cellValue, index) {
            if (cellValue === 0) {
                return '行业1'
            }else if(cellValue === 1) {
                return '行业2'
            }else if(cellValue === 1){
                return '行业3'
            }
        }
    }
}

</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
    float: right;
}
.handSearchBut {
    float: right;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
